<template>
  <n-modal v-model:show="show"
           class="w-11/12 max-w-md "
           preset="card"
           @afterLeave="value=''"
           :bordered="false">
    <n-input v-model:value="value"
             ref="inputRef"
             size="large"></n-input>
    <div class="mt-5">
      <n-button block type="primary" @click="handleSubmit">确定</n-button>
    </div>
  </n-modal>
</template>

<script setup lang="ts">
import {nextTick, ref} from "vue";

const show = ref(false)
const value = ref('')
const mode = ref('')
const inputRef=ref()

const emits = defineEmits(['handle', 'handleParams'])

const handleSubmit = () => {
  if (mode.value === 'params') {
    emits('handleParams', value.value)
  } else {
    emits('handle', value.value)
  }
  show.value = false
}

const doParams = (val: string) => {
  show.value = true
  value.value = val
  mode.value = 'params'

}

const doShow = () => {
  show.value = true
  nextTick(()=>{
    inputRef.value.focus()
  })
}
const doHide = () => {
  show.value = false
}
defineExpose({
  doShow,
  doHide,
  doParams
})

</script>

<style scoped>

</style>